<!-- src/views/list_video_sources.vue -->
<template>
  <div class="container">
    <h2>视频源列表</h2>

    <table class="table table-striped">
      <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">平台</th>
          <th scope="col">视频链接</th>
          <th scope="col">标题</th>
          <th scope="col">车型品牌</th>
          <th scope="col">状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="video in videos" :key="video.id">
          <td>{{ video.id }}</td>
          <td>{{ video.platform }}</td>
          <td><a :href="getVideoUrl(video)" target="_blank">{{ video.video_id }}</a></td>
          <td>{{ video.title }}</td>
          <td>{{ video.car_brand || '-' }}</td>
          <td>{{ video.is_active ? '启用' : '禁用' }}</td>
        </tr>
      </tbody>
    </table>

    <div v-if="loading" class="loading">加载中...</div>
    <div v-if="error" class="alert alert-danger">{{ error }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videos: [],
      loading: true,
      error: null
    };
  },
  methods: {
    getVideoUrl(video) {
      if (video.platform === 'youtube') {
        return `https://youtu.be/${video.video_id}`;
      } else if (video.platform === 'facebook') {
        return `https://www.facebook.com/video.php?v=${video.video_id}`;
      } else if (video.platform === 'discord') {
        const [guildId, channelId] = (video.video_id || '').split('/');
        return `https://discord.com/channels/${guildId}/${channelId}`;
      }
      return '#';
    }
  },
  mounted() {
    fetch('http://localhost:5000/api/videos')
      .then(res => res.json())
      .then(data => {
        this.videos = data.map(v => ({
          ...v,
          car_brand: v.extra_attributes?.car_brand || '-'
        }));
        this.loading = false;
      })
      .catch(err => {
        console.error(err);
        this.error = '❌ 加载视频源失败，请检查后端是否运行';
        this.loading = false;
      });
  }
};
</script>

<style scoped>
.container {
  max-width: 960px;
  margin: auto;
}
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th, .table td {
  padding: 8px;
  border: 1px solid #ddd;
}
.table th {
  background-color: #f8f9fa;
}
.loading {
  font-style: italic;
  color: gray;
}
.alert {
  padding: 1rem;
  background-color: #f8d7da;
  color: #721c24;
  margin-top: 1rem;
}
</style>